<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Login</title>
        <%= stylesheet_link_tag "../javascripts/ext/resources/css/ext-all.css" %>
        <%= stylesheet_link_tag "/stylesheets/blue.css" %>
        <%= javascript_include_tag "/javascripts/ext/adapter/prototype/prototype.js" %>
        <%= javascript_include_tag "/javascripts/ext/adapter/prototype/scriptaculous.js" %>
        <%= javascript_include_tag "/javascripts/ext/adapter/prototype/effects.js" %>
        <%= javascript_include_tag "/javascripts/ext/adapter/prototype/ext-prototype-adapter.js" %>
        <!-- LIBS -->
        <%= javascript_include_tag "/javascripts/ext/ext-base.js" %>
        <!-- ENDLIBS -->
        <%= javascript_include_tag "/javascripts/ext/ext-all-debug.js" %>
        <%= javascript_include_tag "/javascripts/ext/build/locale/ext-lang-zh_CN.js" %>
    </head>
    <body>
        <script>
            Ext.onReady(function(){
                var ds = new Ext.data.Store({
                    //                    proxy: new Ext.data.ScriptTagProxy({
                    //                        url: 'http://extjs.com/forum/topics-remote.php'
                    //                    }),
                    proxy: new Ext.data.HttpProxy({
                        url: '/test/getLinker'
                    }),
                    reader: new Ext.data.JsonReader({
                        root: 'root',
                        totalProperty: 'totalProperty',
                        id: 'post_id'
                    }, [{
                        name: 'link_man',
                        mapping: 'link_man'
                    }, {
                        name: 'link_tel',
                        mapping: 'link_tel'
                    }, {
                        name: 'id',
                        mapping: 'id'
                    }])
                });
                
                // Custom rendering Template
                var resultTpl = new Ext.XTemplate('<tpl for="."><div class="search-item">', '<h3><span>{link_man}<br /></span>{link_tel}</h3>', '</div></tpl>');
                var search = new Ext.form.ComboBox({
                    store: ds,
                    displayField: 'title',
                    typeAhead: false,
                    loadingText: '正在查找...',
                    width: 570,
					valueField: 'id',
                    pageSize: 10,
                    //hideTrigger: true,
					hideTrigger: false,
                    tpl: resultTpl,
                    hiddenName: 'love_name',
                    editable: true,
                    //applyTo: 'search',
                    minChars: 2,
                    itemSelector: 'div.search-item',
                    onSelect: function(record){ // override default onSelect to do redirect
                        if (this.isExpanded()) {
                            this.collapse();
                        }//当点击时关闭combobox
                        //window.location = String.format('http://extjs.com/forum/showthread.php?t={0}&p={1}', record.data.topicId, record.id);
                    }
                });
				var typeTpl = new Ext.XTemplate('<tpl for="."><div class="search-item">', '<h3><span>{id}<br /></span>{card_type}</h3>', '</div></tpl>');
				var cardType = new Ext.form.ComboBox({
                    store: new Ext.data.Store({
                        proxy: new Ext.data.HttpProxy({
                            url: '/admin/getCardTypes'
                        }),
                        reader: new Ext.data.JsonReader({
                            root: 'root',
                            id: 'id'
                        }, ['id', 'card_type'])
                    }),
                    name: 'card_type',
                    loadingText: '正在加载...',
                    //displayField: 'customer_type',
                    displayField: 'card_type',
                    valueField: 'id',
                    mode: 'remote',
					tpl: typeTpl,
                    triggerAction: 'all',
                    hiddenName: 'card_type_id',//如果不想提交displayField，则在这儿指定以提交ID的值．
                    //hiddenId:'type_id',
                    fieldLabel: '证件类型',
                    emptyText: '请选择...',
                    editable: true,
                    allowBlank: false,
                    width: 60,
                    maxHeight: 150,
                    tabIndex: 4
                });
                var formPanel = new Ext.form.FormPanel({
                    baseCls: 'x-plain',
                    labelWidth: 75,
                    url: '/test/submitlinker',
                    defaultType: 'textfield',
                    items: [search,cardType],
                    buttons: [{
                        text: '增加',
                        handler: function(){
                            // check form value 
                            if (formPanel.form.isValid()) {
                                formPanel.form.submit({
                                    waitMsg: 'In processing',
                                    success: function(form, action){
                                        Ext.MessageBox.alert('Confirm', '提交成功');
                                        window.hide();
                                        customerDS.load({
                                            params: {
                                                start: 0,
                                                limit: 10
                                            }
                                        });
                                    },
                                    failure: function(form, action){
                                        Ext.MessageBox.alert('提交错误消息', '提交失败');
                                    }
                                });
                            }
                            else {
                                Ext.MessageBox.alert('错误提示', '请按要求填写必输选项.');
                            }
                        }
                    }, {
                        text: '取消',
                        handler: function(){
                            window.hide();
                        }
                    }]
                });
                formPanel.render(document.body);
            });
        </script>
    </body>
</html>
